<div style="margin-top:30px; "></div>
<div class="container"> 
	<div class="row">
	  <div class="col-xs-3">
	  	<div>
			<div class="list-group">
				<a href="#/user/profile" class="list-group-item">
					我的资料
				</a>
				<a href="#/user/device" class="list-group-item active">
					我的设备
				</a>
				<a href="#/user/archives" class="list-group-item">绑定设备</a>
			</div>
	  	</div>
	  </div>
	  <div class="col-xs-9 ">
	  	<div class="panel panel-primary">
	      <div class="panel-heading">
	        <h3 class="panel-title">设备端口映射</h3>
	      </div>
	      <div class="panel-body">

			  <table class="table table-hover">
				  <thead>
				  <tr>
					  <th>序号</th>
					  <th>域名</th>
					  <th>协议</th>
					  <th>端口</th>
					  <th width="200">操作</th>
				  </tr>
				  </thead>
				  <tbody>
				  <tr ng-repeat="item in list">
					  <td>{{item.id}}</td>
					  <td>{{item.domain}}</td>
					  <td>{{item.protocol | showProtocol}}</td>
					  <td>{{item.port}}</td>
					  <td>
						  <a ng-click="addMapping(item)" class="btn btn-info">编辑</a>
						  <a ng-click="delMapping(item.id, $index)" class="btn btn-default">删除</a>
					  </td>
				  </tr>
				  </tbody>
			  </table>
	      </div>
	    </div>


		  <div>
			  <a ng-click="addMapping()" class="btn btn-default">添加端口映射</a>

		  </div>
	  
	  </div>
	 	
	</div>
</div>




<!-- 编辑弹出框 -->
<div id="addMapping" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">添加端口映射</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label for="b" class="col-sm-2 control-label">域名</label>
                        <div class="col-sm-6">
                            <div>
                                <input ng-model="item.domain" type="text" class="form-control"
                                        ng-show="item.id" readonly>
                                <input ng-model="item.domain" type="text" class="form-control"
                                       ng-show="!item.id">
                            </div>
                        </div>
                        <div class="col-sm-4"></div>
                    </div>

					<div class="form-group">
						<label for="b" class="col-sm-2 control-label">协议</label>
						<div class="col-sm-6">
                            <select class="form-control" ng-model="item.protocol" >
                                <option value="1">HTTP1.1</option>
                            </select>
						</div>
                        <div class="col-sm-4"></div>
					</div>
					<div class="form-group">
						<label for="b" class="col-sm-2 control-label">端口</label>
						<div class="col-sm-6">
							<input type="number" ng-model="item.port"  class="form-control" id="b" placeholder="">
						</div>
                        <div class="col-sm-4"></div>
					</div>

					<div class="form-group">
						<label for="b" class="col-sm-2 control-label">备注</label>
						<div class="col-sm-6">
                            <textarea class="form-control" ng-model="item.description" rows="3"></textarea>
						</div>
                        <div class="col-sm-4"></div>
					</div>

                </form>

            </div>
            <div class="modal-footer">
                <a ng-click="save()" class="btn btn-default">保 存</a>
                <a ng-click="exit()"  class="btn btn-default">取消</a>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->